<template>
  <div>
    <headerNav />
    <div class="subscrIption">
      <div class="mincard mindWidth">
        <span @click="$router.push('/')">首页</span>
        <span>></span>
        <span>政策订阅</span>
      </div>
      <div class="filter_table_content">
        <div class="filter_table mindWidth">
          <!-- 省级 -->
          <div class="region_table_content" v-if="isShowError">
            <div class="region_table_content_L">地区</div>
            <div
              class="region_table_content_C"
              v-if="provinceIndex == -1 && judgeWords(regionData, 1)"
              @click="MoreEvent('policyMore')"
            >
              <span ref="policyMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="policyMore2" />
            </div>
            <div class="region_table_content_R" v-if="provinceIndex == -1" ref="policyMore">
              <span :class="provinceIndex == -1 ? 'active' : ''" @click="provinceElection(-1)">全部</span>
              <span
                v-for="(item, index) in regionData"
                :class="provinceIndex == index ? 'active' : ''"
                @click="provinceElection(index)"
                :key="index"
              >{{ item.province }}</span>
            </div>
            <div class="region_table_content_R" v-if="provinceIndex != -1">
              <span class="active active1">
                {{ regionData[provinceIndex].province }}
                <img
                  src="../../../static/image/region_cha.png"
                  v-show="isShowError"
                  @click="provinceElection(-1)"
                />
              </span>
            </div>
          </div>

          <div class="region_table_content" v-if="!isShowError">
            <div class="region_table_content_L">地区</div>
            <div class="region_table_content_R" ref="areaMore">
              <span :class="fenIndex === 1 ? 'active' : ''" @click="fenCity(1)">国家</span>
              <span :class="fenIndex === 2 ? 'active' : ''" @click="fenCity(2)">{{fenProvince}}</span>
            </div>
          </div>

          <!-- 市级 -->
          <div class="region_table_content" v-if="provinceIndex != -1">
            <div class="region_table_content_L"></div>
            <div
              class="region_table_content_C"
              v-if="
                cityIndex == -1 && judgeWords(regionData[provinceIndex].city, 2)
              "
              @click="MoreEvent('cityMore')"
            >
              <span ref="cityMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="cityMore2" />
            </div>
            <div class="region_table_content_R" v-if="cityIndex == -1" ref="cityMore">
              <span :class="cityIndex == -1 ? 'active' : ''" @click="cityElection(-1)">全部</span>
              <span
                v-for="(item, index) in regionData[provinceIndex].city"
                :class="cityIndex == index ? 'active' : ''"
                @click="cityElection(index)"
                :key="index"
              >{{ item.name }}</span>
            </div>
            <div class="region_table_content_R" v-if="cityIndex != -1 && showFenCity">
              <span class="active active1">
                {{ regionData[provinceIndex].city[cityIndex].name }}
                <img
                  src="../../../static/image/region_cha.png"
                  v-show="isShowError"
                  @click="cityElection(-1)"
                />
              </span>
            </div>
          </div>
          <!-- 区级 -->
          <div class="region_table_content" v-if="cityIndex != -1">
            <div class="region_table_content_L"></div>
            <div
              class="region_table_content_C"
              @click="MoreEvent('areaMore')"
              v-if="judgeWords(regionData[provinceIndex].city[cityIndex].area, 3)"
            >
              <span ref="areaMore1">更多</span>
              <img src="../../../static/image/triangle.png" alt ref="areaMore2" />
            </div>
            <div class="region_table_content_R" ref="areaMore" v-show="showFenCity">
              <span :class="areaIndex == -1 ? 'active' : ''" @click="areaElection(-1)">全部</span>
              <span
                v-for="(item, index) in regionData[provinceIndex].city[cityIndex].area"
                :class="areaIndex == index ? 'active' : ''"
                @click="areaElection(index)"
                :key="index"
              >{{ item }}</span>
            </div>
          </div>
          <div class="search_keyWord">
            <span>关键词</span>
            <div class="searchInput">
              <input
                type="text"
                placeholder="请输入你想关注的部门名称"
                ref="searchInputValue"
                v-model="keywordValue"
              />
              <button class="dominant" @click="getDepartList(1)">搜索</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 如果是分站，显示国家和省级的政策 -->
      <div class="mindWidth dataList" v-show="fenIndex===1">
        <div class="dataList_title">
          <h2>
            <img src="../../assets/titlebe.png" />
            <span>国家</span>
          </h2>
        </div>
        <div class="dataList_content" v-if="provinceData.length">
          <div v-for="(item, index) in provinceData[0].childs" :key="index" class="tjdiv">
            <div class="dataLiast_item">
              <span
                class="changeHanld singlerows"
                @click="seeEnterprise(item.id)"
                v-html="searchHighlight(item.departmentName)"
                :title="item.departmentName"
              ></span>
              <button
                v-if="item.whetherAttention == 0 || item.whetherAttention == null"
                @click="subscribeEven(item, index)"
              >订阅</button>
              <button
                v-if="item.whetherAttention == 1"
                @click="cancelsubscribeEven(item, index)"
                class="already"
              >已订阅</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mindWidth dataList" v-show="fenIndex===2">
        <div class="dataList_title" v-if="provinceData.length">
          <h2>
            <img src="../../assets/titlebe.png" />
            <span>{{provinceData[0].name}}</span>
          </h2>
        </div>
        <div class="dataList_content" v-if="provinceData.length">
          <div v-for="(item, index) in provinceData[0].childs" :key="index" class="tjdiv">
            <div class="dataLiast_item">
              <span
                class="changeHanld singlerows"
                @click="seeEnterprise(item.id)"
                v-html="searchHighlight(item.departmentName)"
                :title="item.departmentName"
              ></span>
              <button
                v-if="item.whetherAttention == 0 || item.whetherAttention == null"
                @click="subscribeEven(item, index)"
              >订阅</button>
              <button
                v-if="item.whetherAttention == 1"
                @click="cancelsubscribeEven(item, index)"
                class="already"
              >已订阅</button>
            </div>
          </div>
        </div>
      </div>

      <div class="mindWidth dataList" v-if="provinceIndex == -1">
        <div class="dataList_title">
          <h2 v-if="provinceIndex == -1">
            <img src="../../assets/titlebe.png" />热门推荐
          </h2>
          <h2 v-if="provinceIndex != -1">
            <img src="../../assets/titlebe.png" />
            <span
              v-if="provinceIndex != -1 && cityIndex == 1"
            >{{ regionData[provinceIndex].province }}</span>
            <span
              v-if="cityIndex != -1 && areaIndex == -1"
            >{{ regionData[provinceIndex].city[cityIndex].name }}</span>
            <span
              v-if="areaIndex != -1"
            >{{ regionData[provinceIndex].city[cityIndex].area[areaIndex] }}</span>
          </h2>
          <!-- <div class="dataNum">共为您找到<span>{{departmentData.length}}</span> 条</div> -->
        </div>
        <div class="dataList_content" v-loading="loading" v-show="notYet">
          <div class="dataLiast_item" v-for="(item, index) in departmentData" :key="index">
            <span
              class="changeHanld singlerows"
              @click="seeEnterprise(item.id)"
              v-html="searchHighlight(item.departmentName)"
              :title="item.departmentName"
            ></span>
            <button
              v-if="item.whetherAttention == 0 || item.whetherAttention == null"
              @click="subscribeEven(item, index)"
            >订阅</button>
            <button
              v-if="item.whetherAttention == 1"
              @click="cancelsubscribeEven(item, index)"
              class="already"
            >已订阅</button>
          </div>
        </div>
        <div class="dataList_content content_imgse" v-if="!notYet">
          <img src="/static/image/searchBox/nullBox.png" alt />
          <p>暂无数据</p>
        </div>
        <div class="changeNew changeHanld" v-if="provinceIndex == -1 && keywordValue == ''">
          <div class="newButton" @click="changeAbatch">
            <i class="el-icon-refresh"></i>换一批
          </div>
        </div>
      </div>

      <div class="mindWidth dataList" v-if="provinceIndex != -1 && cityIndex == -1">
        <div>
          <div class="dataList_title">
            <h2>
              <img src="../../assets/titlebe.png" />
              <span>{{ departmentData[0].name }}</span>
            </h2>
          </div>
          <div class="dataList_content" v-loading="loading" v-show="notYet">
            <div v-for="(item, index) in departmentData[0].childs" :key="index" class="tjdiv">
              <div class="dataLiast_item">
                <span
                  class="changeHanld singlerows"
                  @click="seeEnterprise(item.id)"
                  v-html="searchHighlight(item.departmentName)"
                  :title="item.departmentName"
                ></span>
                <button
                  v-if="
                    item.whetherAttention == 0 || item.whetherAttention == null
                  "
                  @click="subscribeEven(item, index)"
                >订阅</button>
                <button
                  v-if="item.whetherAttention == 1"
                  @click="cancelsubscribeEven(item, index)"
                  class="already"
                >已订阅</button>
              </div>
            </div>
          </div>
          <div class="dataList_content content_imgse" v-if="!notYet">
            <img src="/static/image/searchBox/nullBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
        <div v-for="(items, index) in departmentData[0].departments" :key="index">
          <div class="dataList_title">
            <h2>
              <img src="../../assets/titlebe.png" />
              <span
                style="font-size: 20px"
                class="shidj"
                @click="regionContent(items.name)"
              >{{ items.name }}</span>
            </h2>
          </div>
          <div class="dataList_content" v-loading="loading" v-show="notYet">
            <div v-for="(item, index) in items.childs" :key="index" class="tjdiv">
              <div class="dataLiast_item">
                <span
                  class="changeHanld singlerows"
                  @click="seeEnterprise(item.id)"
                  v-html="searchHighlight(item.departmentName)"
                  :title="item.departmentName"
                ></span>
                <button
                  v-if="
                    item.whetherAttention == 0 || item.whetherAttention == null
                  "
                  @click="subscribeEven(item, index)"
                >订阅</button>
                <button
                  v-if="item.whetherAttention == 1"
                  @click="cancelsubscribeEven(item, index)"
                  class="already"
                >已订阅</button>
              </div>
            </div>
          </div>
          <div class="dataList_content content_imgse" v-if="!notYet">
            <img src="/static/image/searchBox/nullBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <div class="mindWidth dataList" v-if="cityIndex != -1 && areaIndex == -1 && showSub">
        <div v-if="departmentData[0] != undefined">
          <div class="dataList_title">
            <h2>
              <img src="../../assets/titlebe.png" />
              <span>{{ departmentData[0].departments[0].name }}</span>
            </h2>
          </div>
          <div class="dataList_content" v-loading="loading" v-show="notYet">
            <div
              v-for="(item, index) in departmentData[0].departments[0].childs"
              :key="index"
              class="tjdiv"
            >
              <div class="dataLiast_item">
                <span
                  class="changeHanld singlerows"
                  @click="seeEnterprise(item.id)"
                  v-html="searchHighlight(item.departmentName)"
                  :title="item.departmentName"
                ></span>
                <button
                  v-if="
                    item.whetherAttention == 0 || item.whetherAttention == null
                  "
                  @click="subscribeEven(item, index)"
                >订阅</button>
                <button
                  v-if="item.whetherAttention == 1"
                  @click="cancelsubscribeEven(item, index)"
                  class="already"
                >已订阅</button>
              </div>
            </div>
          </div>
          <div class="dataList_content content_imgse" v-if="!notYet">
            <img src="/static/image/searchBox/nullBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
        <div
          v-for="(items, index) in departmentData[0].departments[0].departments"
          v-show="departmentData[0] != undefined"
          :key="index"
        >
          <div class="dataList_title">
            <h2>
              <img src="../../assets/titlebe.png" />
              <span style="font-size: 20px; cursor: default">{{ items.name }}</span>
            </h2>
          </div>
          <div class="dataList_content" v-loading="loading" v-show="notYet">
            <div v-for="(item, index) in items.childs" :key="index" class="tjdiv">
              <div class="dataLiast_item">
                <span
                  class="changeHanld singlerows"
                  @click="seeEnterprise(item.id)"
                  v-html="searchHighlight(item.departmentName)"
                  :title="item.departmentName"
                ></span>
                <button
                  v-if="
                    item.whetherAttention == 0 || item.whetherAttention == null
                  "
                  @click="subscribeEven(item, index)"
                >订阅</button>
                <button
                  v-if="item.whetherAttention == 1"
                  @click="cancelsubscribeEven(item, index)"
                  class="already"
                >已订阅</button>
              </div>
            </div>
          </div>
          <div class="dataList_content content_imgse" v-if="!notYet">
            <img src="/static/image/searchBox/nullBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
      </div>

      <div class="mindWidth dataList" v-if="areaIndex != -1 && showSub">
        <div>
          <div class="dataList_title">
            <h2>
              <img src="../../assets/titlebe.png" />
              <span>{{ departmentData[0].departments[0].departments[0].name }}</span>
            </h2>
          </div>
          <div class="dataList_content" v-loading="loading" v-show="notYet">
            <div
              v-for="(item, index) in departmentData[0].departments[0]
                .departments[0].childs"
              :key="index"
              class="tjdiv"
            >
              <div class="dataLiast_item">
                <span
                  class="changeHanld singlerows"
                  @click="seeEnterprise(item.id)"
                  v-html="searchHighlight(item.departmentName)"
                  :title="item.departmentName"
                ></span>
                <button
                  v-if="
                    item.whetherAttention == 0 || item.whetherAttention == null
                  "
                  @click="subscribeEven(item, index)"
                >订阅</button>
                <button
                  v-if="item.whetherAttention == 1"
                  @click="cancelsubscribeEven(item, index)"
                  class="already"
                >已订阅</button>
              </div>
            </div>
          </div>
          <div class="dataList_content content_imgse" v-if="!notYet">
            <img src="/static/image/searchBox/nullBox.png" alt />
            <p>暂无数据</p>
          </div>
        </div>
      </div>
      <!-- 登录弹窗 -->
      <login-dialog ref="login" @reload="reload"></login-dialog>
      <!-- 查询已满弹框 -->
      <el-dialog
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="300px"
      >
        <template #footer>
          <div class="contents_qydb">
            <img src="../../static/image/cwhyts2.png" alt class="imgs_qydb" />
            <div class="goVip">
              <div class="top">可关注数量已满</div>
              <div class="bn">成为VIP会员畅享更多权益</div>
            </div>
            <div class="option">
              <span class="spans_qydb" @click="dialogVisible = false">再用看看</span>
              <p class="ps_qydb" @click="toVIPPage">升级VIP</p>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <navigation></navigation>
    <footerNav />
    <keyWord ref="keyWord" @onSubmit="attention"></keyWord>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import keyWord from "../../components/keyWord.vue"; //部门订阅关键字
import { sessionTake } from "../../util/validate.js";
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗
import {
  getPolicyDepartmentSubscribeInfo,
  cancelAttention,
  departmentAttention,
  randomObtainDepartment,
  getAllDepartmentArea,
  commonRequest,
  postRequestSplicing
} from "../../api/api.js";

export default {
  components: {
    loginDialog,
    keyWord
  },
  head() {
    return {
      title: "政策订阅-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "政策订阅" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的政策订阅"
        }
      ]
    };
  },
  data() {
    return {
      dialogVisible: false, // 订阅已满
      // 所有部门
      departmentData: [
        {
          departments: [
            {
              departments: []
            }
          ]
        }
      ],
      regionData: [], //地区
      provinceIndex: -1, // 选中省级
      cityIndex: -1, // 选中市级
      areaIndex: -1, // 选中区级
      keywordValue: "", // 关键字
      loading: true,
      notYet: true,

      nationData: [],
      provinceData: [],
      fenIndex: 0,
      fenProvince: "",
      showSub: true, // 分站选择国家，列表数据不展示
      showFenCity: true, //分站选择国家，其他城市不展示
      province: "",
      city: ""
    };
  },
  computed: {
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    let province = this.$route.params.province;
    let city = this.$route.params.city;
    // console.log(99999, province, city);
    if (province !== undefined && city !== undefined) {
      this.province = province;
      this.city = city;
    } else if (province !== undefined && city === undefined) {
      this.province = province;
    } else if (province === undefined && city === undefined) {
      this.province = sessionTake("provinceName");
      this.city = sessionTake("cityName");
    }
    // console.log(4444444444, this.province, this.city);
    this.fenProvince = sessionTake("provinceName");
    if (sessionTake("provinceName") == null) {
      // 获取列表
      this.changeAbatch();
    }
    this.getList();
  },
  methods: {
    getList() {
      getAllDepartmentArea(0).then(res => {
        this.regionData = res.result;
        let data = res.result;
        if (this.province) {
          for (let i = 0; i < data.length; i++) {
            if (data[i].province == this.province) {
              this.provinceIndex = i;
              for (let q = 0; q < data[i].city.length; q++) {
                if (data[i].city[q].name == this.city) {
                  this.cityIndex = q;
                  this.getDepartList();
                  return;
                } else if (q + 1 == data[i].city.length) {
                  this.getDepartList();
                  return;
                }
              }
            } else if (i + 1 == data.length) {
              this.changeAbatch();
              return;
            }
          }
        }
      });
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    fenCity(val) {
      this.fenIndex = val;
      if (val === 1) {
        this.showSub = false;
        this.showFenCity = false;
        this.getNation();
      } else {
        this.showFenCity = true;
        this.showSub = true;
        // this.cityIndex = -1;
        this.getProvince();
      }
    },
    getNation() {
      let params = {
        province: "国家",
        city: "",
        area: "",
        pageSize: 10,
        departmentName: ""
      };
      this.getPolicyDepartmentSubscribeInfo(params);
    },
    getProvince() {
      let params = {
        province: sessionTake("provinceName"),
        city: "",
        area: "",
        pageSize: 10,
        departmentName: ""
      };
      this.getPolicyDepartmentSubscribeInfo(params);
    },
    // 分站获取部门数据方法
    getPolicyDepartmentSubscribeInfo(params) {
      // console.log(666666, this.provinceIndex, this.cityIndex);
      getPolicyDepartmentSubscribeInfo(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.provinceData = res.result.departmentInfo;
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    toVIPPage() {
      window.open("/pageVIP", "_blank");
    },
    regionContent(value) {
      let regionData = this.regionData;
      for (let i = 0; i < regionData[this.provinceIndex].city.length; i++) {
        if (value == regionData[this.provinceIndex].city[i].name) {
          this.cityElection(i);
        }
      }
    },
    // 判断是否显示
    judgeWords(data, index) {
      if (data == undefined) {
        return false;
      }
      // 1省级2市级3区级
      if (index == 1) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].province;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 2) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i].name;
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      if (index == 3) {
        if (data != "") {
          var str = "";
          for (let i = 0; i < data.length; i++) {
            str = str + data[i];
          }
          if (str.length * 14 + (12 + 28) * data.length + 68 > 1060) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
    },
    // 跳转部门内页
    seeEnterprise(id) {
      this.$router.push({
        path: "/departmentInside",
        query: {
          id: id
        }
      });
    },
    // 取消部门订阅
    cancelsubscribeEven(item, index) {
      cancelAttention(item.id).then(res => {
        if (res.code === 200) {
          item.whetherAttention = 0;
          this.$message.success({
            message: "取消订阅成功",
            type: "success"
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 订阅部门
    subscribeEven(item, index) {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.$refs.login.open();
        return;
      }
      this.$refs.keyWord.open(item.id);
    },
    attention(id, keyWord) {
      // console.log("attention", keyWord);
      let params = {
        departmentId: id,
        keywords: keyWord
      };
      departmentAttention(params).then(res => {
        if (res.code === 10001) {
          this.$refs.login.open();
        } else if (res.code === 10002) {
          // 订阅数量已满
          this.dialogVisible = true;
        } else if (res.code == 200) {
          this.getDepartList();
          this.$message({
            type: "success",
            message: "订阅成功"
          });
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    // 搜索高亮
    searchHighlight(val) {
      if (this.keywordValue == "") {
        return val;
      } else {
        return val.replace(
          new RegExp(this.keywordValue, "g"),
          "<em style='color: red;font-style:normal;'>" +
            this.keywordValue +
            "</em>"
        );
      }
    },
    // 随机请求一批订阅部门
    changeAbatch() {
      randomObtainDepartment({ number: 12 }).then(res => {
        this.loading = false;
        this.departmentData = res.result;
      });
    },
    // 根据地区获取部门数据
    getDepartList(index) {
      // console.log(index);
      if (index == 1 && this.keywordValue == "") {
        this.$message({
          type: "warning",
          message: "请输入您要查询的地区或部门"
        });
        return;
      }
      this.loading = true;
      this.notYet = true;
      let provinceValue = "";
      let cityValue = "";
      let areaValue = "";
      if (this.provinceIndex > -1) {
        provinceValue = this.regionData[this.provinceIndex].province;
      }
      if (this.cityIndex > -1) {
        cityValue = this.regionData[this.provinceIndex].city[this.cityIndex]
          .name;
        provinceValue = null;
      }
      if (this.areaIndex > -1) {
        cityValue = null;
        provinceValue = null;
        areaValue = this.regionData[this.provinceIndex].city[this.cityIndex]
          .area[this.areaIndex];
      }
      getPolicyDepartmentSubscribeInfo({
        province: provinceValue,
        city: cityValue,
        area: areaValue,
        pageSize: 10,
        departmentName: this.keywordValue
      }).then(res => {
        // console.log(9999999, res);
        this.loading = false;
        if (res.code === 200) {
          this.departmentData = res.result.departmentInfo;
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    // 省级选中
    provinceElection(index) {
      this.provinceIndex = index;
      if (index == -1) {
        this.cityIndex = -1;
        this.areaIndex = -1;
        this.changeAbatch();
      } else {
        this.getDepartList();
      }
    },
    // 市级选中
    cityElection(index) {
      this.cityIndex = index;
      if (index == -1) {
        this.areaIndex = -1;
      }
      this.getDepartList();
    },
    // 区级选中
    areaElection(index) {
      this.showSub = true;
      this.fenIndex = 0;
      this.areaIndex = index;
      this.getDepartList();
    },
    // 更多收起切换
    MoreEvent(value) {
      if (this.$refs[value + "1"].innerHTML == "更多") {
        this.$refs[value + "1"].innerHTML = "收起";
        this.$refs[value].style.maxHeight = "inherit";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(180deg)";
      } else {
        this.$refs[value + "1"].innerHTML = "更多";
        this.$refs[value].style.maxHeight = "32px";
        this.$refs[value + "2"].style.transform =
          "translateY(-50%) rotate(0deg)";
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__footer {
  height: 310px;
}
.contents_qydb {
  width: 200px;
  margin-left: 22px;
  margin-top: 20px;

  .goVip {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 55px;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;

    .top {
      font-size: 14px;
      color: #000;
    }

    .bn {
      font-size: 14px;
      color: #1d78de;
    }
  }
}

.el-dialog__footer {
  height: 340px;
  position: relative;
}

.option {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  bottom: 10px;
  width: 100%;
  font-size: 14px;
  left: 0;

  .spans_qydb {
    background-color: #bfbfbf;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    border-radius: 30px;
  }

  .ps_qydb {
    border-radius: 30px;

    background-color: #1d78de;
    padding: 4px 30px;
    color: #fff;
    cursor: pointer;
    // bottom: 15px;
    // right: 26px;
    // width: 159px;
    // height: 44px;
    // cursor: pointer;
  }
}

.el-dialog {
  border-radius: 10px;
}

.imgs_qydb {
  width: 100%;
  border-radius: 10px;
}

.tjdiv {
  width: 25%;
}

.content_imgse {
  display: block !important;
  background-color: transparent !important;
  box-shadow: 0 0 black !important;
  overflow: hidden;
  text-align: center;

  img {
    margin: 0 auto;
    margin-top: 138px;
    width: 300px;
    height: 210px;
  }

  p {
    color: rgb(204, 204, 204);
    font-size: 14px;
    margin-top: 10px;
  }
}

.subscrIption {
  margin-bottom: 60px;
  //   background-color: #f9fbff;
  span {
    font-size: 14px;
    margin: 0 5px;
    cursor: pointer;
  }
}

.filter_table_content {
  .filter_table {
    background-color: #fff;
    box-shadow: rgb(238, 238, 238) -1px 3px 6px;
    border-radius: 4px;

    .region_table_content {
      display: flex;
      border-bottom: 1px solid #f2faff;
      padding: 10px 20px;
      box-sizing: border-box;
      position: relative;

      .region_table_content_C {
        position: absolute;
        right: 20px;
        top: 15px;
        width: 40px;
        cursor: pointer;

        span {
          font-size: 14px;
          color: rgb(68, 162, 255);
          margin: 0 0;
        }

        img {
          position: absolute;
          right: 0px;
          top: 50%;
          transform: translateY(-50%) rotate(0);
          width: 8px;
        }
      }

      .region_table_content_L {
        width: 60px;
        display: flex;
        font-size: 14px;
        padding: 2px 6px;
        margin: 3px 0;
      }

      .region_table_content_R {
        flex: 1;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        margin-right: 40px;
        max-height: 32px;
        overflow: hidden;

        span {
          font-size: 14px;
          padding: 2px 6px;
          margin: 3px 14px;
          cursor: pointer;
          border-radius: 4px;

          &:hover {
            background-color: #44a2ff;
            color: #fff;
          }
        }

        .active {
          background-color: #44a2ff;
          color: #fff;
          position: relative;
          overflow: hidden;
          border-radius: 4px;

          img {
            width: 16px;
            position: absolute;
            right: -2px;
            top: -2px;
          }
        }

        .active1 {
          padding-right: 16px;
        }
      }
    }
  }

  .search_keyWord {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 20px;

    span {
      font-size: 14px;
    }
  }

  .searchInput {
    width: 360px;
    height: 32px;
    margin-left: 45px;
    display: flex;
    align-items: center;

    input {
      display: inline-block;
      width: 240px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #daeaf5;
      border-radius: 4px 0px 0px 4px;
      box-sizing: border-box;
      padding-left: 12px;

      &::-webkit-input-placeholder {
        color: #aaa;
      }
    }

    button {
      display: inline-block;
      box-sizing: border-box;
      width: 60px;
      height: 32px;
      line-height: 30px;
      background: #44a2ff;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      margin-left: -1px;
      color: #fff;
      cursor: pointer;
    }
  }
}

.dataList_title {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  margin-top: 20px;

  h2 {
    font-size: 24px;
    font-weight: normal;
    display: flex;
    align-items: center;

    span {
      font-size: 24px;
      font-weight: normal;
      transition: all 0.2s;
    }

    .shidj:hover {
      font-size: 22px !important;
      color: rgb(68, 162, 255);
    }

    img {
      width: 18px;
      height: 18px;
      margin-right: 15px;
    }
  }

  .dataNum {
    span {
      color: #44a2ff;
    }
  }
}

.dataList_content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  background-color: #fff;

  .dataLiast_item {
    height: 50px;
    padding-left: 70px;
    // justify-content: center;
    align-items: center;
    display: flex;
    border-bottom: 1px solid #daeaf5;
    transition: all 0.2s;

    &:nth-child(4n) {
      padding-left: 30px;
    }

    &:hover {
      span {
        font-size: 16px;
        color: rgb(68, 162, 255);
      }

      button {
        transform: scale(1.1);
      }
    }

    span {
      transition: all 0.2s;
      width: 170px;
      display: inline-block;
      margin: 0px 5px 0 10px;
    }

    button {
      color: #44a2ff;
      background: #fff;
      border: 1px solid #44a2ff;
      border-radius: 3px;
      cursor: pointer;
      margin-left: 4px;
      font-size: 14px;
      width: 50px;
      padding: 1px 0;
      transition: all 0.2s;
    }

    .already {
      background: #cbdce8;
      color: #fff;
      font-size: 14px;
      border-color: #cbdce8;
    }
  }
}

.changeNew {
  height: 40px;
  margin: 20px auto;

  .newButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 40px;
    color: #fff;
    margin: 20px auto;
    border-radius: 6px;
    background-color: #44a2ff;
  }

  i {
    font-size: 18px;
    margin: 0 10px;
  }
}
</style>
